<script>
import axios from "axios";

export default {
  name: "ModifyEmail",
  data() {
    return {
      email_loading: false,
      active: 0,
      input: "",
      email: ""
    }
  },
  methods: {
    sendCode(e) {
      this.email_loading = true
      axios.get("/api/code/" + this.email)
          .then(resp => {
            this.email_loading = false
            if (resp.data.code === 0) {
              this.$message.success(resp.data.msg)
              e.target.innerText = "已发送(60)"
              e.target.disabled = true
              e.target.style.cursor = "not-allowed"
              let time = 59
              let inter = setInterval(function () {
                e.target.innerText = `已发送(${time})`
                time--
                if (time < 0) {
                  e.target.innerText = "重新发送"
                  e.target.disabled = false
                  e.target.style.cursor = "pointer"
                  clearInterval(inter)
                }
              }, 1000)
            } else {
              this.$message.warning(resp.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
    next() {
      console.log(this.active)
      switch (this.active) {
        case 0:
        case 2:
          if (this.input !== "") {
            axios.get(`/api/code/check/${this.email}/${this.input}`)
                .then(res => {
                  if (res.data.code === 0) {
                    this.$message.success(res.data.msg)
                    this.input = ""
                    this.active++
                  } else {
                    this.$message.warning(res.data.msg)
                  }
                })
                .catch(err => {
                  this.$message.error(err);
                })
          } else {
            this.$message.warning("请输入验证码")
          }
          break
        case 1:
          if (this.input !== '' && /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.input) && this.input !== this.email) {
            this.email = this.input
            this.input = ""
            this.active++
          } else {
            this.$message.warning("请输入正确的邮箱")
          }
          break
        case 3:
          axios.get(`/api/user/update/${this.email}`)
              .then(res => {
                if(res.data.code === 0) {
                  this.$message.success(res.data.msg)
                  this.$store.commit("setEmail",this.email)
                  this.$emit('closeModifyEmail')
                  this.email = ""
                  this.active = 0
                  this.input = ""
                }else {
                  this.$message.warning(res.data.msg)
                }
              }).catch(err => this.$message.error(err))

          break
      }

    }
  },
  mounted() {
    this.active = 0
    this.email = this.$store.state.user.email
  }
}
</script>

<template>
  <div class="se_cont">
    <el-steps :active="active" finish-status="success">
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
    </el-steps>
    <div v-if="active === 0 || active === 2">
      <div class="se_box">发送验证码到{{ email }}</div>
      <div class="se_input_box">
        <el-input v-model="input"></el-input>
        <button class="se_btn" @click="sendCode" v-loading="email_loading">发送验证码</button>
      </div>
    </div>

    <div v-if="active === 1">
      <div class="se_box">请输入新邮箱</div>
      <el-input v-model="input"></el-input>
    </div>

    <div v-if="active === 3">
      <div style="font-size: 25px;margin-top: 20px;font-weight: bold">已完成验证，点击完成保存修改</div>
    </div>

    <div class="next">
      <button @click="next"><i :class="active===3?'el-icon-check':'el-icon-right'"></i></button>
    </div>
  </div>
</template>

<style>
.se_cont {
  .el-input__inner {
    height: 50px;
    font-size: 20px;
  }
}

.se_box {
  margin-top: 30px;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 30px;
}

.se_input_box {
  height: 50px;
  display: flex;

  .el-input__inner {
    width: 200px;
  }
}

.se_btn {
  margin-left: 30px;
  width: 180px;
  height: 50px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  color: #ffffff;
  border-radius: 10px;
  border: none;
  background-color: #409EFF;
}

.next {
  width: 90%;
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
}

.next button {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #707070;
  color: #707070;
}

.next button:hover {
  border: none;
  background-color: #409EFF;
  color: #ffffff;

}

.next button i {
  font-size: 25px;
}
</style>